<template>
  <div class="ccui-app-container">
    <div class="ccui-advanced-search-wrapper ccui-clearfix">
      <el-search
        ref="search"
        :formProp="formData"
        @search="
          searchData => {
            search(searchData, this.formData.bizStatus);
          }
        "
        @change="searchChange"
        :isShowSearch="isShowSearch"
        class="ccui-highsearch"
        :selectClear="true"
      >
        <div class="ccui-tab-wrapper">
          <el-button
            :type="isActive === index ? 'table-top-active' : 'table-top'"
            size="mini"
            v-for="(item, index) in focuses"
            :key="index"
            @click="tabChange(item.focus)"
          >
            <template v-if="item.focus === 'all-item' && totalNum !== null"
              >全部{{ isActive === 0 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'un-submitted' && totalNum !== null"
              >待提交{{ isActive === 1 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'under-approval' && totalNum !== null"
              >审批中{{ isActive === 2 ? ` (${totalNum})` : "" }}
            </template>
            <template
              v-else-if="item.focus === 'return-approval' && totalNum !== null"
              >审批退回{{ isActive === 3 ? ` (${totalNum})` : "" }}
            </template>
          </el-button>
        </div>
        <div class="ccui-extend-btn">
          <el-button
            size="mini"
            type="primary"
            icon="icon-ccui-add-sup"
            @click="handleGoNew"
            >新增
          </el-button>
        </div>
        <template slot="search">
          <el-input
            v-model="formData.orderName"
            clearable
            searchLabel="订单名称"
            placeholder="请输入订单名称模糊查询"
            @blur="handleTrim('orderName')"
          />
          <el-input
            v-model="formData.orderNoAccurate"
            clearable
            searchLabel="订单编号"
            placeholder="请输入订单编号模糊查询"
          />
          <el-input
            v-model="formData.thirdCategoriesOfName"
            clearable
            searchLabel="分类名称"
            placeholder="请输入分类名称模糊查询"
            @blur="handleTrim('thirdCategoriesOfName')"
          />

          <el-input
            v-model="formData.partyBName"
            clearable
            searchLabel="供应商"
            placeholder="请输入供应商模糊查询"
          />

          <el-date-picker
            v-model="formData.orderDeliveryTime"
            :clearable="false"
            align="right"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            searchLabel="订单发出时间"
            value-format="timestamp"
          />
          <el-select
            v-model="formData.bizStatus"
            placeholder="请选择订单状态查询"
            clearable
            searchLabel="订单状态"
          >
            <el-option
              v-for="item in bizStatusSearch"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
        <!-- 表单高级搜索 -->
        <el-input
          v-model="formData.orderName"
          clearable
          searchLabel="订单名称"
          placeholder="请输入订单名称模糊查询"
          slot="searchItem1"
          @blur="handleTrim('orderName')"
        />
        <el-input
          v-model="formData.orderNoAccurate"
          clearable
          searchLabel="订单编号"
          placeholder="请输入订单编号模糊查询"
          slot="searchItem2"
        />
        <el-input
          v-model="formData.thirdCategoriesOfName"
          clearable
          searchLabel="分类名称"
          placeholder="请输入分类名称模糊查询"
          slot="searchItem3"
          @blur="handleTrim('thirdCategoriesOfName')"
        />

        <el-input
          v-model="formData.partyBName"
          clearable
          searchLabel="供应商"
          placeholder="请输入供应商模糊查询"
          slot="searchItem4"
        />

        <el-date-picker
          v-model="formData.orderDeliveryTime"
          :clearable="false"
          align="right"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          searchLabel="订单发出时间"
          slot="searchItem5"
          value-format="timestamp"
        />

        <el-select
          v-model="formData.bizStatus"
          placeholder="请选择订单状态查询"
          clearable
          searchLabel="订单状态"
          slot="searchItem6"
        >
          <el-option
            v-for="item in bizStatusSearch"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-search>
    </div>
    <div class="ccui-multifunctional-table-wrapper">
      <el-table
        ref="multipleTable"
        :data="tableData"
        :fit="true"
        border
        class="ccui-multifunctional-table"
        max-height="20000"
        @cell-click="cellClick"
        :cell-style="cellStyle"
      >
        <template v-for="(table, index) in tableColumnData">
          <el-table-column
            :fixed="table.fixed || false"
            :type="table.type"
            :key="index"
            :label="table.label"
            :min-width="table.width"
            :prop="table.prop"
            :filters="table.filters"
            :formatter="formatterList[table.formatterName]"
            :show-overflow-tooltip="true"
            :align="table.align"
            :header-align="table.headerAlign || 'left'"
          ></el-table-column>
        </template>

        <el-table-column label="操作" width="80" fixed="right">
          <template slot-scope="scope">
            <el-button
              v-if="
                scope.row.bizStatus == '待提交' ||
                scope.row.bizStatus == '已撤回' ||
                scope.row.bizStatus == '审批退回'
              "
              size="mini"
              type="text"
              @click="handleGoEdit(scope.row)"
              >编辑
            </el-button>
            <el-button
              v-if="
                scope.row.bizStatus == '待提交' ||
                scope.row.bizStatus == '已撤回'
              "
              size="mini"
              type="text"
              @click="handleDelete(scope.row, '')"
              >删除
            </el-button>
            <el-button
              v-if="scope.row.bizStatus == '审批中'"
              size="mini"
              type="text"
              @click="handleRevoke(scope.row)"
              >撤回
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="ccui-table-footer" v-show="isShowPagination">
        <div id="ccui-paging">
          <el-pagination
            :total="totalNum"
            :page-size="pageSizeCode"
            :current-page="pageNoCode"
            :page-sizes="[10, 20, 50, 100, 200, 500]"
            background
            layout="total, sizes, prev, pager, next, jumper"
            popper-class="ccui-paging-page-size-popper"
            @size-change="
              val => {
                handleSizeChange(val, 0);
              }
            "
            @current-change="
              val => {
                handleCurrentChange(val, 0);
              }
            "
          />
          <el-button
            class="ccui-pagination-btn"
            size="mini"
            type="default"
            @click="handleSizeChange('none')"
            >确定
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import orderEntryMixins from "../mixins/orderEntryMixins";
// import { formatNumber } from "@/basa/utils"

export default {
  name: "all-item",
  mixins: [orderEntryMixins],
  data() {
    return {
      isActive: 0,
      formData: {
        bizStatus: "",
        listQueryType: "1",
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  methods: {
    handleTrim(key) {
      this.$set(
        this.formData,
        key,
        this.formData[key].replace(/(^\s*)|(\s*)$/g, "")
      );
    },
    // 删除方法
    handleDelete(r) {
      let objMessage = {
        title: "删除确认",
        content: "确定要删除吗?",
        confirmButtonText: "确定",
        loadingMessage: "删除中,请稍等..."
      };
      // obj.isShowPageLoading= true;
      let params = {
        ids: [r.id],
        isShowPageLoading: true,
        loadingMessage: objMessage.loadingMessage
      };
      this.deleteMessageBox(objMessage, params, "", this.removeOrder);
    },
    // 撤回方法
    handleRevoke(r) {
      let objMessage = {
        title: "提示信息",
        content: "确定要撤销吗?",
        confirmButtonText: "确定",
        loadingMessage: "撤销中,请稍等..."
      };
      let params = {
        id: r.id,
        isShowPageLoading: true,
        loadingMessage: objMessage.loadingMessage
      };
      this.deleteMessageBox(
        objMessage,
        params,
        "",
        this.enteringRevokeApproval
      );
    }
  },
  activated() {
    this.pageSizeCode = 10;
    this.pageNoCode = 1;
    //重置搜索表单
    this.$refs.search.resetForm();
    this.formDataSearch = {};
    //改为第一项
    this.$refs.search.handleChange(0);
    this.getList({}, "");
  }
};
</script>

<style scoped lang="scss">
/*.ccui-tab-wrapper {*/
/*  padding-top: 0px !important;*/
/*}*/

/deep/ .el-searchs-box {
  width: 406px !important;
}
</style>
